<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    输入内容:<input type="text" id="myInput" />
    <button>键盘事件</button>
  </body>
  <script>
    /*
       1.在 keypress 事件发生时，意味着按键会影响屏幕上显示的文本。对插入或移除字符的键，所有浏览器都会触发 keypress 事件，
         其他键则取决于浏览器。( 非字符键不会触发 keypress );
       2.浏览器在 event 对象上支持 charCode 属性，只有发生 keypress 事件时这个属性才会被设置值，包含的是按键字符对应的
         ASCII 编码。通常，charCode 属性的值是 0，在 keypress 事件发生时则是对应按键的键码。要以跨浏览器方式获取字符编
         码，首先要检查 charCode 属性是否有值，如果没有再使用 keyCode，
    */
    const inputDOM = document.getElementById('myInput');
    //监听 keydown : 用户按下键盘上某个键时触发，而且持续按住会重复触发。
    // inputDOM.addEventListener('keydown',(event)=>{
    //     console.log('keydown--keyCode',event.keyCode);
    // });
    //监听 keypress : 用户按下键盘上某个键并产生字符时触发，而且持续按住会重复触发。
    function getCharCode(event) {
      console.log(event.key);
      console.log(event.char);
      if (typeof event.charCode == 'number') {
        return event.charCode;
      } else {
        return event.keyCode;
      }

    }
    inputDOM.addEventListener('keypress', (event) => {
      console.log('keypress--charCode', getCharCode(event));//keypress--charCode 100
      console.log('keypress--charCode', String.fromCharCode(getCharCode(event)));//keypress--charCode d

    });
    //监听 keyup : 用户释放键盘上某个键时触发。
    // inputDOM.addEventListener('keyup',(event)=>{
    //     console.log('keyup--keyCode',event.keyCode);
    // })
  </script>
</html>
